<template>
  <!--排名列表-->
  <div class="sub-box">
    <div class="sub-content">
      <ul class="recommend-box">
        <li v-for="item in dataList">
          <router-link to="/sommelierDetail">
            <div class="img-box">
              <img src="../../../assets/images/p-1.png" alt="">
            </div>
            <div class="name-info">
              <span class="name">附近侍酒师</span>
              <span class="distance-box">距离 <span class="distance-num">1.2km</span></span>
            </div>
            <div class="summary">
              <span class="position">侍酒师</span>
              <span class="gender">女</span>
              <span class="age">28岁</span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'name',
    data() {
      return {
        dataList:[1,2,3,4,5]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @bdradius:4px;
  .sub-box {
    width: 100%;
    background: #f3f3f3;
    .sub-content {
      padding-bottom: 1px;
      margin-bottom: 10px;

      .recommend-box{
        width:100%;
        padding:0 10px;
        display: flex;
        flex-wrap: wrap;
        li {
          width: 48.5%;
          margin-right: 3%;
          /*border: 1px solid #eee;*/
          border-radius:  @bdradius;
          margin-top:10px;
          background: #fff;
          .img-box {
            width: 100%;
            img {
              width: 100%;
              border-radius:  @bdradius;
            }
          }
          .name-info {
            padding: 0 2px;
            margin-top:10px;
            font-size: 0.95rem;
            display: flex;
            justify-content: space-between;
            .name {
              font-weight: bold;
              color: #333;
            }
            .distance-box {
              font-size: 0.8rem;
              color: #D44242;
              margin-top: 2px;
            }
          }
          .summary {
            height: 30px;
            line-height: 30px;
            padding: 0 2px;
            font-size:0.6rem;
            color: #fff;
            .position, .gender, .age {
              padding: 1px 10px;
              border-radius: 15px;
            }
            .position {
              background: #FB3F40;
            }
            .gender, .age {
              background: #FF6978;
            }
          }
        }
        li:nth-child(even){
          margin-right:0;
        }
      }
    }
  }

</style>
